﻿<!DOCTYPE html>
<html>
    <head>
        <title>Rage N Furious</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel=stylesheet type="text/css" href="stylehome.css" /> 
		<link rel="shortcut icon" type="images/x-icon" href="favicon.ico" />	
		<script type="text/javascript" src="scripthome.js"></script>
		<script type="text/javascript" src="home_login.js"></script>
        <script src="http://js.pusher.com/1.11/pusher.min.js" type="text/javascript"></script>
		
    </head>

	<body id="body">
		<div id="header"></div>
		<div id="menu_top">
			<table class="tablemenu">
				<tr>
				 <th class="thmenu"><a href="index.html">HOME</a></th>
				 <th class="thmenu"><a href="#">RULES</a></th>
				 <th class="thmenu"><a href="#">CHARACTERS</a></th> 
				 <th class="thmenu"><a href="#">RANKING</a></th>
				 <th class="lastth"><a href="#" >CONTACTS</a></th>
				</tr>			  
			</table>
		</div>
	
		<div id="login_area" style="height:230px; width:600px; margin:auto;">
			Déjà inscris sur le jeu ?
			<input type="radio" name="registered" value="true" id="registered_true" /> 
			<label for="registered_true">Oui</label>
			<input type="radio" name="registered" value="false" id="registered_false" /> 
			<label for="registered_false">Non</label><br />				
			<div style="display:none;" id="loginDiv">
				<label for="login">Pseudo : </label>
				<input id="login" name="login" />
				<span id="indicator_Login" class=""></span>
				<br />
			</div>
			<div style="display:none;" id="passwordDiv">
				<label for="password">Password : </label>
				<input id="password" name="password" />
				<br />
			</div>				
			<div id="persoDiv" style="display:none;">
				Personnage :<br />
				<input type="radio" name="perso" value="0" id="pikachu" /> 
				<label for="pikachu"><img src="images/pikachuskate.png" alt="Pikachu" /></label>
				<input type="radio" name="perso" value="1" id="alice" /> 
				<label for="alice"><img src="images/alice.png" alt="Alice" /></label>
				<input type="radio" name="perso" value="2" id="tux" /> 
				<label for="tux"><img src="images/largetux-walk-right-0.png" alt="SuperTux" /></label><br />
				<br />
			</div>				
			<input id="send" style="display:none;margin-left:42%;" onclick="sendData()" type="submit" value="Go!"/>														
		</div>
		<div id="play_area">
			<img src="images/defoulezvotrerage.png" style="margin:2px 0 0 100px;">
			<a href="#"><img class="play_button" src="images/play_button.png"></a><br/>
			<p class="players_choice">
				<input type="text" id="pseudo_local1" size="18" />
				<input type="text" id="pseudo_distant1" size="18" />
			</p>
		</div>
		<div id="playing_room">
		<h3>Playing room</h3>
		<table>
				<tr>
				 <th>Player 1</th>
				 <th>Player 2</th>
				 <th>Watch game</th> 
				</tr>			  
			</table>
		</div>
		<div id="waiting_room">
		<h3>Waiting room</h3>
		<table>
				<tr>
				 <th>Players</th>
				 <th>Levels</th>
				 <th>Invite</th> 
				</tr>			  
			</table>
		</div>
		<div id="main_page">
			<input type="text" id="pseudo_local" size="18" />
            <input type="text" id="pseudo_distant" size="18" />
			<div id="chat-box">
						<p id="chat-view"></p>
						<input type="text" name="message" id="message" />
						<input type="button" id="envoyer" value="Envoyer"></input>
						<audio id="audio" src="sounds/pm_receive.wav" style="display:none;" controls="controls" ></audio>
			</div>
		</div>
		
		<div pub-key="pub-539e2a83-2cf5-4051-b20f-08d6904a5334" sub-key="sub-66d0a3ca-67b2-11e1-8331-1ddf254cc96a" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
        <script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>
		<script>(function(){
                // LISTEN FOR MESSAGES
				PUBNUB.subscribe({
                        channel	 : "chat-home",              // CONNECT TO THIS CHANNEL.

                        restore	 : false,               // STAY CONNECTED, EVEN WHEN BROWSER IS CLOSED
                                                        // OR WHEN PAGE CHANGES.

                        callback  : function(message) { // RECEIVED A MESSAGE.
                                receivePushChatMessage(message);
                        },

                        disconnect : function() {       // LOST CONNECTION.
                                alert("Connection Lost." +
                                "Will auto-reconnect when Online."
                                )
                        },

                        reconnect : function() {	 // CONNECTION RESTORED.
                                alert("And we're Back!")
                        }
                })
        })();</script>
	</body>

</html>